<template>
  <el-card>
    <template #header>
      <h3 v-text="t('language')"></h3>
    </template>
    
    <el-radio-group 
      :model-value="languageStore.isChinese ? 'zh' : 'en'" 
      @change="handleLanguageChange"
      class="full-width-radio-group">
      <el-radio-button label="en">English</el-radio-button>
      <el-radio-button label="zh">中文</el-radio-button>
    </el-radio-group>
  </el-card>
</template>

<script setup>
import { useLanguageStore } from '@/stores/language'

const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'language': {
      'en': 'Language',
      'zh': '语言'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

// 处理语言切换
const handleLanguageChange = (value) => {
  languageStore.setLanguage(value)
}
</script>
